﻿<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/template.js"></script>
</head>
<body>
    <div class="form">
        <div class="pull-right">
            已选择 <em class="green" id="select-num">0</em> 项目
            <span class="btn-group btn-group-md" role="group">
                <button style="padding-left: 20px; padding-right: 20px;" id="submit" class="btn btn-primary">检测</button>
            </span>
        </div>
        <form id="search-form" class="search-form form-inline" style="margin-right:200px;">
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <div class="input-group-btn dropdown">
                            <button style="margin-right:-2px" class="btn btn-default dropdown-toggle" type="button" id="Button1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="select_text" key="ProcessName">流程名称</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <!-- <li><a href="#" key="ProcessKindName" name="流程分类">流程分类</a></li>-->
                                <li><a href="#" key="ApplicationName" name="系统名称">系统名称</a></li>
                                <li><a href="#" key="ProcessName" name="流程名称">流程名称</a></li>
                                <li><a href="#" key="IsActiveName" name="启用状态">启用状态</a></li>
                                <li><a href="#" key="DocumentTypeName" name="表单类型">表单类型</a></li>
                            </ul>
                        </div>
                        <!-- /btn-group -->
                      
                            <input type="text" class="form-control" placeholder="请输入流程名称">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="submit">搜索</button>
                            </span>
                        
                    </div>
                    <!-- /input-group -->
                </div>
                <!-- /.col-lg-6 -->
            </div>

        </form>
    </div>
    <div class="table-wrap">
        <div class="fix-wrap">
            <table class="table fix-table">
                <colgroup>
                    <col width="80" />
                    <col width="80" />
                    <col />
                    <col width="80" />
                    <col width="120" />
                    <col width="100" />
                </colgroup>
                <thead>
                    <tr style="text-align: center;">
                        <td>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked="checked"><i class="glyphicon glyphicon-ok"></i> 全选
                                </label>
                            </div>
                        </td>
                        <td>系统名称</td>
                        <td>流程名称</td>
                        <td>启用状态</td>
                        <td>表单类型</td>
                        <td>操作</td>
                    </tr>
                </thead>
            </table>
        </div>
        <table id="list-table" class="table table-hover">
            <colgroup>
                <col width="80" />
                <col width="80" />
                <col />
                <col width="80" />
                <col width="120" />
                <col width="100" />
            </colgroup>
            <tbody id="ProcessModuleList_Info">
            </tbody>
        </table>
        <div class="fix-wrap-bottom" id="Bottom_PagiNation" style="display:none;margin-bottom:2px;">
            <div style="float: right;">
		    <form class="form-inline" id="pagenum-form">
			    <div class="form-group">
			    <label for="PageNumber" style="margin-left:50px;">每页</label>
			    <input id="PageNumber"  style="width:50px;display:inline-block;" class="form-control input-sm"  onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="4" size="14" name="PageNumber" type="text" value="100"/>
			    <label>条</label>
			    </div>
		    </form>
	        </div>
            <div id="PagiNation_Info" ></div>
        </div>
    </div>
    <div class="empty img">
        <img src="../images/Wait.gif" />
    </div>
    <div class="empty gray text">数据加载中…</div>
</body>
</html>
<script id="ProcessModuleList_Module" type="text/html">
    {{each list as item key}}
	 <tr guid="{{item.ProcessGUID}}" name="{{item.ProcessName}}">
         <td>
             <div class="checkbox">
                 <label style="margin-left: 9px;">
                     <input type="checkbox" checked="checked" guid="{{item.ProcessGUID}}"><i class="glyphicon glyphicon-ok"></i>
                 </label>
             </div>
         </td>
         <td>{{item.ApplicationName}}</td>
         <td>{{item.ProcessName}}</td>
         <td>{{item.IsActiveName}}</td>
         <td>{{item.DocumentTypeName}}</td>
         <td><a class="checking" href="#" title="{{item.DetectionResult}}">{{item.DetectionName}}</a>　<a class="view" href="#">预览</a> </td>
     </tr>
    {{/each}}
</script>

<script id="PagiNation_Module" type="text/html">
     <nav  style="text-align:right;">
          <ul class="pagination">
            <li>
              <a href="javascript:void(0)" aria-label="Previous" key="Previous">
                <span aria-hidden="true" >&laquo;</span>
              </a>
            </li>
            {{each pagenum_list as val key}}
                <li><a href="javascript:void(0)" key="{{val}}" class="green {{if val == currPageNum}}background_color_gray{{/if}}">{{val}}</a></li>
            {{/each}}
            <li>
              <a href="javascript:void(0)" aria-label="Next" key="Next">
                <span aria-hidden="true" >&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
</script>

<script type="text/javascript">
    $(function () {
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var currPageNum = 1;    //当前第几页
        var pageCount = 1;  //总页数
        backmainobj.Init(GetQueryString("Rand"));
        $(".search-form .row .input-group input").val("");
        getCurrInfo();
     
        function getCurrInfo() {
            var str = backmainobj.getCurrInfo();
            if (str != "") {
                $(".empty.text").html(str);
                setTimeout(function () {
                    getCurrInfo();
                }, 100)
            } else {
                backmainobj.getProcessModuleList();
                pageCount = backmainobj.getPageNum(parseInt($("#pagenum-form input").val()));
                $(".empty").css("display", "none");
                $("#Bottom_PagiNation").css("display", "block");
                loadInfo();
            }

        }
        //加载页数
        function loadPage() {

            //结束页数
            var endPageNum = currPageNum + 2;
            //开始页数
            var bgnPageNum = currPageNum - 2;
            if (pageCount <= 1) {
                $('#PagiNation_Info').html("");
                return;
            }
            //条数5条 或者条数小于总条数时
            if (endPageNum < 5) {
                if (pageCount < 5) {
                    endPageNum = pageCount;
                } else {
                    endPageNum = 5;
                }
            }
            if (endPageNum > pageCount) {
                endPageNum = pageCount;
                bgnPageNum = pageCount - 4;
            }
            var pagenum_list = [];
            //开始页默认为当前页数-2
            if (currPageNum - 2 <= 0 || bgnPageNum < 1) {
                bgnPageNum = 1;
            } 
            for (var i = bgnPageNum; i <= endPageNum; i++) {
                pagenum_list.push(i);
            }
            var html = template("PagiNation_Module", { pagenum_list: pagenum_list, currPageNum: currPageNum });
            $('#PagiNation_Info').html(html);
        }
        function loadInfo() {
            var key = $(".search-form .row .dropdown .btn .select_text").attr("key");
            var query = $(".search-form .row .input-group input").val();
            var pageNum = parseInt($("#pagenum-form input").val());
            InitInfo(backmainobj.getProcessModuleList_Query(currPageNum, pageNum,key, query));
            loadPage();
            cheNum();
        }

        function InitInfo(tplData) {
            var data = JSON.parse(tplData);
            for (var i = 0; i < data.length; i++) {
                if (data[i]["DetectionResult"] == "") {
                    data[i]["DetectionName"] = "检测"
                } else {
                    data[i]["DetectionName"] = "已检测"
                }
            }
            var html = template("ProcessModuleList_Module", { list: data });
            $('#ProcessModuleList_Info').html(html);
        }
        
        function PageNumChange() {
            
            pageCount = backmainobj.getPageNum(parseInt($("#pagenum-form input").val()));
            currPageNum = 1;
            loadInfo();
        }
        //下拉框选择事件
        $("body").on("click", ".dropdown .dropdown-menu a", function () {
            $(".search-form .row .dropdown .btn .select_text").attr("key", $(this).attr("key").trim());
            $(".search-form .row .dropdown .btn .select_text").text($(this).attr("name").trim());
            $(".search-form .row .input-group input").attr("placeholder", "请输入" + $(this).attr("name").trim());
        });

        $("table").on("click", "thead input[type='checkbox']", function () {
            var me = $(this), wrap = me.closest(".table-wrap");
            wrap.find("tbody input[type='checkbox']").prop("checked", me.prop("checked"));
            cheNum();
        });
        $("table").on("click", "tbody input[type='checkbox']", function () {
            cheNum();
        });
        $("#search-form").on("submit", function (e) {
            e.preventDefault();
            loadInfo();
        });
        $("#pagenum-form").on("submit", function (e) {
            e.preventDefault();
            PageNumChange();
        });
        $("#pagenum-form input").on("blur", function (e) {
            PageNumChange();
        });
       
        $("body").on("click", ".pagination li a", function (e) {
            var pageNum = $(this).attr("key").toString();
            if (pageNum == "Next" && currPageNum < pageCount) {
                currPageNum = currPageNum + 1;
            } else if (pageNum == "Next" && currPageNum == pageCount) {
                return;
            } else if (pageNum == "Previous" && currPageNum > 1) {
                currPageNum = currPageNum - 1;
            } else if (pageNum == "Previous" && currPageNum == 1) {
                return;
            } else {
                currPageNum =parseInt(pageNum);
            }
           
            loadInfo();
        });
        function cheNum() {
            var num = $("#list-table").find("tbody input:checked").length;
            $("#select-num").html(num);
        }
        $("body").on("click", "span button#submit", function () {
            var list = [];
            $("tbody input[type='checkbox']:checked").each(function () {
                list.push($(this).attr("guid"));
            });
            console.log(list);
            if (list.length == 0) return;
            var guid = backmainobj.setProcessGUIDList(JSON.stringify(list));
            window.location.href = 'Detection.html?from=href&guid=' + guid;
        });
        $("table").on("click", ".checking", function () {
            var guid = $(this).closest("tr").attr("guid");

            var list = [];
            list.push(guid);
            var guid = backmainobj.setProcessGUIDList(JSON.stringify(list));
            window.showModalDialog('Detection.html?from=open&guid=' + guid)
        });
        var x = 10;
        var y = 20;
        $("table").on("mouseover", ".checking", function (e) {
            myTitle = this.title;
            if (myTitle == "") {
                return;
            }
            var tooltip = "<div id='tooltip' class='tooltip'>" + myTitle + "<\/div>"; //创建 div 元素 文字提示
            $("body").append(tooltip);    //把它追加到文档中
            $("#tooltip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");      //设置x坐标和y坐标，并且显示
        });
        $("table").on("mouseout", ".checking", function (e) {
            $("#tooltip").remove();   //移除 
        });
        $("table").on("mousemove", ".checking", function (e) {
            $("#tooltip")
             .css({
                 "top": (e.pageY + y) + "px",
                 "left": (e.pageX + x) + "px"
             });
        });
        $("table").on("click", ".view", function () {
            var guid = $(this).closest("tr").attr("guid");
            var name = $(this).closest("tr").attr("name");
            console.log(guid);
            backmainobj.Preview(guid, name);
        });
    });

</script>
